<template>
  <div class="search-section" style="position: relative">
    <div class="bgFFF color000 mb12 bdradius4">
      <div style="position: relative">
        <div class="color000">
          <Card dis-hover class="criteria">
            <div ref="cardSearchBox" class="example-code ivu-col">
              <Form
                :model="pageData"
                :label-width="66"
                label-position="left"
                inline
              >
                <Row class="search-input">
                  <Col span="5">
                    <FormItem :label="this.tabsName=== 'zhengce' ? '政策标题' : '帮助标题'">
                      <Input
                        type="text"
                        v-model="pageData.keywords"
                        clearable
                        @on-clear="onSearch"
                        @input="onblur"
                        :placeholder="this.tabsName=== 'zhengce' ? '请输入政策标题' : '请输入帮助标题'"
                      />
                    </FormItem>
                  </Col>
                  <!--                  <Col :xs="12" :sm="10" :md="8" :lg="4" :xl="{span:'14-2'}">
                                      <FormItem label="添加人">
                                        <Select
                                          v-model="pageData.sourceId"
                                          clearable
                                          @on-clear="onSearch"
                                          :transfer="true"
                                          placeholder="请选择添加人"
                                        >
                                          <Option value="1">添加人</Option>
                                        </Select>
                                      </FormItem>
                                    </Col>-->
                  <Col span="5">
                    <FormItem label="添加时间">
                      <DatePicker
                        v-model="pickDate"
                        type="daterange"
                        clearable
                        split-panels
                        placeholder="请选择添加时间"
                        format="yyyy-MM-dd"
                        @on-change="handleDaterangeInput"
                        :transfer="true"
                        :editable="false"
                        :style="styles"
                      ></DatePicker>
                    </FormItem>
                  </Col>
                  <Col :xs="12" :sm="10" :md="8" :lg="4" :xl="{span:'14-2'}">
                    <Button
                      class="mr20"
                      icon="ios-search"
                      type="primary"
                      @click="onSearch"
                    >搜索
                    </Button>
                    <Button @click="onReset">重置</Button>
                  </Col>
                </Row>
              </Form>
            </div>
          </Card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { JournalismList } from '@/api/data.js'
export default {
  components: {},
  props: {
    TabsName: {
      type: String,
      default: '',
    },
    newsType: {
      type: String,
      default: '',
    }
    // pickDate: {
    //   type: Array,
    //   default: [],
    // },
  },
  data() {
    return {
      tabsName: this.TabsName,
      pickDate: [],
      pageData: {
        total: "",
        // 搜索输入框
        keywords: '',
        page: {
          size: 10, // 每页多少操作
          current: 1, // 当前第几页
        },
      },
    };
  },
  computed: {
    styles() {
      let width = this.width || 100;
      return {
        width: width <= 100 ? `${width}%` : `${width}px`,
      };
    },
  },
  created() {
  },
  watch: {
    $route(val) {
      this.tabsName = this.$route.query.tabsName;
    }
  },
  methods: {
    // 输入框输入事件
    onblur() {
      this.$emit('getChildren', this.pageData.keywords)
    },
    qingk(){
      this.pickDate = []
      this.pageData.keywords = ''
    },
    //添加时间
    handleDaterangeInput(data) {
      this.pageData.startDate = data[0];
      this.pageData.endDate = data[1];
      if (this.pageData.startDate == "" && this.pageData.endDate == "") {
        this.$emit("onSearch", false);
      }
    },
    // 缴费年份
    handleDaterangeInput1(data) {
      this.pageData.orderYear = data;
      if (this.pageData.orderYear == "") {
        this.$emit("onSearch", this.pageData);
      }
    },
    async onSearch() {
      console.log(this.newsType);
      const res = await JournalismList({
        newsType: this.newsType ? this.newsType : 1,
        keywords: this.pageData.keywords,
        page: {
          page: 1,
          pageSize: 10
        }
      })
      console.log('搜索列表', res);
      this.$emit('searchList', res)
      this.pageData.page.current = 1;
      this.pageData.total = 0;
      this.$emit("onSearch", this.pageData);
    },
    onReset() {
      console.log(1);
      this.pageData = {
        total: "",
        page: {
          size: 10, // 每页多少操作
          current: 1, // 当前第几页
        },
      }
      this.pickDate = [];
      this.$emit("onSearchh", this.pageData);
    },
  },
};
</script>
<style lang="less" scoped>
</style>
